<template>
  <div class="invoice-wrap">
    <h2>发票信息</h2>
    <div class="con flex-xbt flex-yc">
      <p>电子普通发票 个人</p>
      <el-link type="primary" :underline="false" @click="onEditInvoice">
        修改
      </el-link>
    </div>
  </div>
  <comm-dialog v-model="dialogVisible" title="发票类型" submitStr="保存并使用">
    <el-form
      label-position="left"
      label-width="100"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
    >
      <el-form-item label="发票抬头" prop="taitou">
        <el-radio-group v-model="ruleForm.taitou">
          <el-radio-button label="1">个人</el-radio-button>
          <el-radio-button label="2">单位</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="个人名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请填写'个人'或您的姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="发票内容" prop="content">
        <el-radio-group v-model="ruleForm.content">
          <el-radio-button>商品明细</el-radio-button>
          <el-radio-button>商品类别</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="收票人手机" prop="mobile">
        <el-input
          placeholder="请填写收票人手机"
          v-model="ruleForm.mobile"
        ></el-input>
      </el-form-item>
      <el-form-item label="收票人邮箱">
        <el-input
          placeholder="请填写收票人邮箱"
          v-model="ruleForm.email"
        ></el-input>
      </el-form-item>
    </el-form>
  </comm-dialog>
</template>

<script setup lang="ts">
import CommDialog from '@/pages/mall/components/CommDialog.vue'
import { reactive, ref } from 'vue'
import { FormInstance, FormRules } from 'element-plus'

const dialogVisible = ref(false)

interface RuleForm {
  taitou: string
  name: string
  content: string
  mobile: string
  email: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  taitou: '1',
  name: '',
  content: '',
  mobile: '',
  email: '',
})
const rules = reactive<FormRules<RuleForm>>({
  taitou: [{ required: true, message: '请选择发票抬头', trigger: 'blur' }],
  name: [{ required: true, message: '请填写个人名称', trigger: 'blur' }],
  content: [{ required: true, message: '请填写发票内容', trigger: 'blur' }],
  mobile: [{ required: true, message: '请填写收票人手机', trigger: 'blur' }],
})

const onEditInvoice = () => {
  dialogVisible.value = true
}
</script>

<style scoped lang="scss">
.invoice-wrap {
  padding: 20px;
  font-size: 16px;
  font-weight: 400;
  border-bottom: 1px solid $borderCol;

  h2 {
    margin-bottom: 18px;
    font-weight: 500 !important;
  }

  p {
    color: rgb(4 7 36 / 45%);
  }
}
</style>
